<template>
  <el-container>
    <el-main>
      <el-form :model="personForm" ref="personForm" :label-position="labelPosition" label-width="60px">
        <el-row class="headSearch">条件检索</el-row>
        <el-row class="rr">
          <el-col :xs="3" :sm="3" :md="3" :lg="3" :xl="3">
            <el-form-item prop="record_name" label-width="0">
              <el-input prefix-icon="el-icon-search" v-model="personForm.record_name" clearable placeholder="姓名/拼音首字母"/>
            </el-form-item>
          </el-col>
          <el-col :xs="2" :sm="2" :md="2" :lg="2" :xl="2" style="margin:10px 24px 0">
            <el-button class="btnSearch1" type="primary" @click="submitForm()">搜索</el-button>
          </el-col>
        </el-row>
        <collapse-vertical>
          <el-row class="rr" v-show="item3Seem">
            <el-row>
              <el-col :xs="7" :sm="7" :md="7" :lg="7" :xl="7">
                <el-form-item prop="record_sfzhm" label="身份证号">
                  <el-input v-model="personForm.record_sfzhm" clearable placeholder="身份证号码"/>
                </el-form-item>
              </el-col>
              <el-col :xs="1" :sm="1" :md="1" :lg="1" :xl="1">
                <div>&nbsp;</div>
              </el-col>
              <el-col :xs="7" :sm="7" :md="7" :lg="7" :xl="7">
                <el-form-item prop="record_no" label="工号">
                  <el-input v-model="personForm.record_no" clearable placeholder="工号"/>
                </el-form-item>
              </el-col>
              <el-col :xs="1" :sm="1" :md="1" :lg="1" :xl="1">
                <div>&nbsp;</div>
              </el-col>
              <el-col :xs="7" :sm="7" :md="7" :lg="7" :xl="7">
                <el-form-item prop="record_lxdh" label="联系电话">
                  <el-input v-model="personForm.record_lxdh" clearable placeholder="联系电话"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :xs="7" :sm="7" :md="7" :lg="7" :xl="7">
                <el-form-item prop="record_dwname" label="所属单位">
                  <el-input v-model="personForm.record_dwname" @click.native="sendDw" readonly placeholder="所属单位"/>
                </el-form-item>
              </el-col>
              <el-col :xs="1" :sm="1" :md="1" :lg="1" :xl="1">
                <div>&nbsp;</div>
              </el-col>
              <el-col :xs="7" :sm="7" :md="7" :lg="7" :xl="7">
                <el-form-item prop="record_chargeunit" label="收费路段">
                  <el-input v-model="personForm.record_chargeunit" @click.native="sendRoad" readonly placeholder="收费路段"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-form-item prop="record_zw" label="职务">
                <el-radio-group v-model="personForm.record_zw">
                  <el-radio v-for="item in duties" :label="item.id">{{item.value}}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item prop="record_state" label="状态">
                <el-radio-group v-model="personForm.record_state">
                  <el-radio v-for="item in state" :label="item.id">{{item.value}}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-row>
            <el-row>
              <el-col :xs="7" :sm="7" :md="7" :lg="7" :xl="7">
                <el-form-item prop="record_start" label="在职时间">
                  <el-date-picker v-model="personForm.record_start"
                                  type="daterange"
                                  style="width: 100%"
                                  value-format="yyyy-MM-dd"
                                  range-separator="-"
                                  start-placeholder="开始日期"
                                  end-placeholder="结束日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4" class="hidBtn">
                <el-button @click="submitForm()" size="mini">提交</el-button>
                <el-button @click="resetForm('personForm')" size="mini">重置</el-button>
              </el-col>
            </el-row>
          </el-row>
        </collapse-vertical>
        <el-row style="text-align: center">
          <!--<el-button  icon="el-icon-arrow-down" @click="item3Seem = !item3Seem" type="text"></el-button>-->
         <!-- <el-button  icon="el-icon-arrow-up" @click="closeHidden" type="text"></el-button>-->
          <el-button style="border: none;background-color: transparent" size="small" @click="item3Seem = !item3Seem;isDisplay=!isDisplay" :icon="isDisplay?iconUp:iconDown"></el-button>
        </el-row>
      </el-form>
    </el-main>
  </el-container>
</template>
<script>
  import CollapseVertical from '../../../utils/collapseVertical'
  export default {
    name: 'person-child-form',
    components: { CollapseVertical },
    data() {
      return {
        iconUp: 'el-icon-arrow-up',
        iconDown: 'el-icon-arrow-down',
        isDisplay: false,
        item3Seem: false,
        labelPosition: 'left',
        personForm: {
          record_sfzhm: '', // 身份证号码
          record_no: '', // 工号
          record_dw: '', // 单位
          record_chargeunit: '', // 收费路段
          record_unitno: '', // 收费路段编号
          record_dwname: '', // 单位名称
          record_name: '', // 姓名
          record_lxdh: '', // 联系电话
          record_zw: '', // 职务
          record_xb: '', // 性别
          record_start: '',
          record_state: '' // 状态
        },
        duties: [], // 职务
        sex: [], // 性别
        state: [] // 状态
      }
    },
    mounted: function() {
    },
    props: ['dw_name', 'road_name', 'pageNum', 'ranNum', 'pageSize'],
    watch: {
      dw_name: function(val) {
        this.personForm.record_dw = val.orgno
        this.personForm.record_dwname = val.orgname
      },
      road_name: function(val) {
        this.personForm.record_chargeunit = val.unitname
        this.personForm.record_unitno = val.unitno
      },
      pageNum: function(val) {
        this.submitForm()
      },
      pageSize: function(val) {
        this.submitForm()
      },
      ranNum: function(val) {
        this.submitForm()
      }
    },
    methods: {
      submitForm: function() {
        this.$emit('tableLoad', true)
      },
      resetForm(personForm) {
        this.$refs[personForm].resetFields()
      },
      /* 向父组件传递 dialogDwVisible dialogRoadVisible */
      sendDw: function() {
        this.$emit('dwBoolean', true)
      },
      sendRoad: function() {
        this.$emit('roadBoolean', true)
      }
    }
  }
</script>

<style scoped>
  #slideRow{
    border: none;
  }
  .hidBtn{
    margin-left: 8px
  }
  .hidBtn .el-button{
    margin-top: 10px;
    width: 45px;
    height: 22px;
    font-family: MicrosoftYaHei;
    font-size: 12px;
    color: #444444;
    padding: 3px 10.5px;
  }
  .el-main{
    padding: 0px;
    margin: 0;
  }
  .headSearch{
    font-family: MicrosoftYaHei;
    font-size: 13px;
    color: #7F8CA6;
    margin-bottom: 16px;
    margin-left: 25px;
    margin-top: 22px;
  }
  .btnSearch1{
    width: 80px;
    height: 24px;
    font-family: MicrosoftYaHei;
    font-size: 12px;
    padding: 4px 28px;
  }
  .rr{
    margin-left: 25px;
  }
  .el-footer {
    text-align: center;
    padding: 0;
    margin: 0;
    height: 0px;
  }
  .el-main{
    margin-bottom: 0;
    padding-bottom: 0;
  }
  .el-form-item{
    height: 48px;
    margin-bottom: 8px;
  }
</style>
